<template>
  <div class="left-div">
    <div class="title">
      <span>题型总览</span>
    </div>
    <div class="topic">
      <a-input-search
        v-model:value="value"
        placeholder=" "
        enter-button="搜索"
        size="mini"
        @search="onSearch"
      />
      <div class="topic-tree">
        <topicTree ref="topicTreeRef" />
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { ref } from 'vue';
  import topicTree from './topic-tree.vue';
  const value = ref('');
  const topicTreeRef = ref();
  const onSearch = (val) => {
    topicTreeRef.value.actions.getTree(val);
  };
</script>
<style lang="less" scoped>
  .left-div {
    // height: 100%;
    background-color: #fff;
    margin-right: 16px;

    .topic {
      padding: 16px;

      :deep(.ant-input) {
        border: 1px solid #136cc4 !important;
        background: #f5faff;
      }
    }

    .title {
      width: 100%;
      padding: 16px;
      font-weight: bold;
      color: #3f4355;
      font-size: 16px;
      font-family: PingFang SC-Bold, PingFang SC;
      border-bottom: 2px solid #f0f1f8;
      border-radius: 6px;
    }
  }
</style>
